<template>
  <div class="interact">
    <van-nav-bar
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
      title="互动消息"
    >
    </van-nav-bar>
    <div class="bs" ref="text">
      <van-swipe-cell>
        <div class="zu">
          <img src="/img/touxiang.png" alt="" />
          <div>
            <span class="bt">客服</span>
            <br />
            <span class="wt">您好，请问有什么可以帮到您的吗？</span>
          </div>
        </div>
        <template #right>
          <van-button square class="ydu" text="已读" />
          <van-button square class="schu" text="删除" />
        </template>
      </van-swipe-cell>
      <van-field v-model="value" label="留言" placeholder="输入您的问题" class="xiaoxi">
        <template #button>
          <van-button size="small" type="primary" @click="setme">发送</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      text:''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    setme(){
      this.$refs.text.innerHTML +=(`<van-swipe-cell>
        <div class="wo">
          <div>
            <span class="bt">小熊</span>
            <br />
            <span class="wt">${this.value}</span>
          </div>
          <img src="/company/tou.webp" alt="" />
        </div>
        <template #right>
          <van-button square class="ydu" text="已读" />
          <van-button square class="schu" text="删除" />
        </template>
      </van-swipe-cell>`)
    }
  },
};
</script>

<style lang="scss">
.interact {
  .van-icon {
    color: #333;
  }
  .bs {
    height: 100vh;
    background: #f5f5f5;
    .ydu {
      height: 100%;
      background: #4960f7;
      color: #fff;
      font-weight: 500;
      margin: 0;
    }
    .schu {
      height: 100%;
      background: #6a97fa;
      color: #fff;
      font-weight: 500;
      margin: 0;
    }
    .zu {
      padding-top: 20px;
      margin-left: 15px;
      margin-right: 15px;
      display: flex;
      text-align: left;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
      position: relative;
      img {
        border-radius: 50%;
        margin-right: 15px;
        width: 45px;
      }
      .bt {
        font-weight: 600;
        font-size: 16px;
        color: #333;
        // padding-bottom: 20px;
        // margin-bottom: 10px;
      }
      .wt {
        font-size: 14px;
        color: #666666;
        background-color: #fff;
        padding: 8px;
        margin: 2px;
        border-radius: 10px;
        position: absolute;
      }
    }
    .wo {
      padding-top: 20px;
      display: flex;
      justify-content: end;
      text-align: right;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
      position: relative;
      img {
        border-radius: 50%;
        margin-right: 15px;
        width: 45px;
      }
      .bt {
        font-weight: 600;
        font-size: 16px;
        color: #333;
      }
      .wt {
        font-size: 14px;
        color: #666666;
        background-color: rgb(212, 223, 176);
        padding: 8px;
        margin: 2px;
        border-radius: 10px;
        position: absolute;
        right: 15%;
        // display: inline-block;
        height: 20px;
      }
    }
    .xiaoxi{
      position: fixed;
      bottom: 0;
    }
  }
}
</style>
